<template>
    <div id="cartdetail">
 
        <div id="icon" @click="goto()">
            <van-icon name="arrow-left" size="26" />
        </div>

        <div class="cartdetail-box">  

            <div class="cartdetail-box-top">
                <!-- 轮播图 -->
                <van-swipe :autoplay="3000">
                    <van-swipe-item v-for="(item, index) in obj.pics2" :key="index">
                        <img :src="item" />
                    </van-swipe-item>
                </van-swipe>
                <!-- 商品数据 -->
                <div class="cartdetail-box-title">
                    <p>{{obj.basicInfo.name}}</p>
                    <span>{{obj.basicInfo.characteristic}}</span>
                </div>
                <div class="cartdetail-box-container">
                    <div class="cartdetail-box-container-left">   
                        <font>低价￥{{obj.basicInfo.minPrice}}</font>
                        <div>原价:{{obj.basicInfo.originalPrice}}</div>
                    </div>
                    <div class="cartdetail-box-container-right">库存:{{obj.basicInfo.stores}}</div>
                </div>
            </div>
            <!-- 商品介绍、商品评价 -->
            <van-tabs>
                <van-tab title="商品介绍">
                    <div class="cartdetail-box-html" v-html="obj.content"></div>
                </van-tab>
                <van-tab title="商品评价">
                    商品评价
                </van-tab>
            </van-tabs>
        </div>

        <!-- 商品导航 -->
        <van-goods-action>
            <van-goods-action-icon icon="service-o"/>
            <van-goods-action-icon icon="shopping-cart-o" to="/Cart" :badge="$store.getters.Count" />
            <van-goods-action-icon>
                <van-rate 
                    v-model="value" 
                    :count="1" 
                    color="#ffd21e" 
                    void-icon="star"
                    void-color="#eee" />
            </van-goods-action-icon>
            <van-goods-action-button text="立即购买" @click="onClickPopup()" />
            <van-goods-action-button color="#AA2929" text="加入购物车" @click="onClickPopup()" />
        </van-goods-action>

        <!-- 弹出层 -->
         <!-- 弹出层 -->
        <van-popup
            v-model="show"
            closeable
            position="bottom"
            :style="{ height: '65%' }"
            >
            <div>
                <div class="item">
                    <img :src="data.pic" alt="">
                    <div class="item-box">
                        <p>{{data.name}}</p>
                        <p style="color:red">￥{{data.minPrice}}</p>
                    </div>
                </div>
                <div class="properties" v-for="(item,index) in obj.properties" :key="index">
                    <div class="properties-top">{{item.name}}</div>
                    <van-tag plain color="gray"  v-for="(item,index) in item.childsCurGoods" :key="index">
                        {{item.name}}
                    </van-tag>
                </div>
                <div class="item_list">
                    <div>购买数量</div>
                    <van-stepper 
                        v-model="data.count" 
                        />
                </div>
            </div>
           <van-button color="#B7282E" block @click="CartAdd(data)">加入购物车</van-button>
        </van-popup>

    </div>
</template>

<script>
export default {
    data() {
        return {
            value:0,
            obj:[],  // 轮播图数据
            data:[],
            show:false,
        }
    },
    mounted() {
        console.log(this.$route.query.id);

        let id = this.$route.query.id;
        console.log(id);
        // 商品详情
        this.$API.goodlist(id).then((res)=>{
            console.log(res.data.data);
            this.obj = res.data.data;
            this.data = this.obj.basicInfo;
            console.log(res.data.data.basicInfo);
        }).catch((error)=>{
            console.log(error);
        });
    },
    methods: {
        // 返回上一级
        goto(){
            this.$router.go(-1);
        },
        // 点击 加入购物车==>弹出
        onClickPopup(){
            this.show = true;
        },
        // 点击 加入购物车 \ 登录 \ 跳转
        CartAdd(item){
            var token = localStorage.getItem("token");
            console.log(token);
            if(token){
                this.$store.commit("add", item);
                this.show = false;
            }else{
                this.$router.push("/Login");
                this.$message('请先进行登录！');
            }
        },
    },
}
</script>

<style lang="scss">
#cartdetail{
    width:100%;
    height:100%;
    background-color: #F5F5F5;
    font-size: 0.35rem;
    #icon{
        width:0.7rem;
        height: 0.7rem;
        border-radius: 0.4rem;
        border:1px solid #fff;
        background-color: rgba(0, 0, 0, 0);
        display: inline-flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        left: 0.12rem;
        top: 0.12rem;
        z-index: 999;
        .van-icon{
            border-radius: 0.5rem;
            background-color: #fff;
            padding:0.02rem;
        }
    }
    .cartdetail-box{
        width:100%;
        height:100%;
        .cartdetail-box-top{
            width:100%;
            height:100%;
            background-color: #fff;
            .van-swipe{
                img{
                    width:100%;
                }
            }
            .cartdetail-box-title{
                margin:0.2rem 0 0.22rem 0.2rem;
                p{
                    margin:0 0 0.2rem 0;
                }
                span{
                    color:#B8B8B8;
                    font-size:0.25rem;
                }
            }
            .cartdetail-box-container{
                width:100%;
                color:gray;
                font-size: 0.25rem;
                display: inline-flex;
                justify-content: space-between;
                align-items: center;
                .cartdetail-box-container-left{
                    width:32%;
                    display: inline-flex;
                    margin-left: 0.2rem;
                    display: inline-flex;
                    justify-content: space-between;
                    align-items: center;
                    font{
                        color:red;
                    }
                }
                .cartdetail-box-container-right{
                    width:20%;
                }
            }
        }
        .van-tabs{
            background-color: #fff;
            margin-top: 0.2rem;
            .cartdetail-box-html{
                width: 100%;
                height: 200px;
                font-size: 0.27rem;
                span{
                    width:50%;
                    margin:0.15rem 0.2rem;
                }
                img{
                    width: 100% !important;
                    height: 100% !important;
                }
            }
        }
    }
    .van-goods-action{
        box-shadow: 0 2px 4px rgba(0, 0, 0, .4), 0 0 6px rgba(0, 0, 0, .04);
        .van-rate {
            height:100%;
            text-align: center;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 0.18rem;
        }
    }
    .van-popup{
        width:100%;
        font-size: 0.25rem;  
        .van-button{
            position: fixed;
            bottom: 0;
        }
        .item{
            width:100%;
            display: inline-flex;
            border-bottom: 0.01rem solid lightgray;
            img{
                width:1.22rem;
                height:1.22rem;
                margin:0.3rem;
            }
        }
        .properties{
            padding:0.45rem 0.35rem;
            border-bottom: 0.01rem solid lightgray;
            .properties-top{
                height:0.4rem;
            }
            .van-tag{
                border:0.01rem solid lightgray;
                border-radius: 0.1rem;
                padding:0.14rem 0.3rem;
                margin-right: 0.15rem;
                margin-top:0.1rem;
            }
            .van-tag:hover{
                border:0.01rem solid red;
            }
        }
        .item_list{
            width: 90%;
            position: absolute;
            bottom: 1.15rem;
            margin-left:0.2rem;
            display: inline-flex;
            justify-content: space-between;
            align-items: center;
        }
    }
}
</style>